<template>
  <TopBar :nav-list="navList" />
  <Swiper :source="sourceOne" />
  <Poster :poster="posterZero" />
  <Poster :poster="posterOne" />
  <Poster :poster="posterTwo" />
  <Poster :poster="posterThree" />
  <Poster :poster="posterFour" />
  <Swiper :source="sourceTwo" />
  <Poster :poster="posterFive" />
  <Poster :poster="posterSix" />
  <BackTop :action="action" />
  <Footer />
</template>

<script lang="ts" setup>
  import { ref, inject, onMounted } from "vue";
  import { AxiosInstance } from "axios";
  import { CarouselList, NavList, PosterPops } from "../../types/Home";
  import TopBar from "./components/Topbar.vue";
  import Swiper from "./components/Swiper.vue";
  import BackTop from "./../../components/BackTop.vue";
  import Poster from "./components/Poster.vue";
  import Footer from "./../../components/Footer.vue";
  const http = inject<AxiosInstance>("http") as AxiosInstance;

  import { useListenScroll } from "../../hooks/UseListenScroll";

  const { action } = useListenScroll();

  const navList = ref<NavList[]>([
    { id: 1, name: "小米官网", href: "/", active: true },
    { id: 2, name: "小米商城", href: "/#/shop" },
    { id: 3, name: "小米澎湃OS", href: "/#/hyperos" },
    { id: 4, name: "小米汽车", href: "/#/car" },
    { id: 5, name: "小米影像", href: "/#/visual" },
    { id: 6, name: "云服务", href: "https://i.mi.com/" },
    { id: 7, name: "Iot", href: "https://iot.mi.com/" },
    { id: 8, name: "有品", href: "/youpin" },
    { id: 9, name: "小爱开放平台", href: "https://xiaoai.mi.com/" },
    {
      id: 10,
      name: "Location",
      href: "https://www.mi.com/a/h/28031.html?sign=16e89fe1079f3f505dfeac5481b7a4d5",
    },
  ]);

  const sourceOne = ref<Array<CarouselList>>([
    {
      id: 1,
      bigSource:
        "https://img.youpin.mi-img.com/ferriswheel/0ab388fd_16e0_434e_a3de_b659878c9470.jpeg@base@tag=imgScale&F=webp&h=1180&q=90&w=2560",
      smallSource:
        "https://img.youpin.mi-img.com/ferriswheel/4cd987b7_e0e2_4e57_9e9c_7a8c24a829a3.jpeg@base@tag=imgScale&F=webp&h=1440&q=90&w=1080",
      targetUrl:
        "https://www.xiaomiev.com/ultra?spmref=MiShop_PC.mihomepage.mtl_6720bfd0352df30001ebf72c.1",
    },
    {
      id: 2,
      bigSource:
        "https://img.youpin.mi-img.com/ferriswheel/d3c29529_1b0b_4efe_be87_32be0a39b372.jpeg@base@tag=imgScale&F=webp&h=1180&q=90&w=2560",
      smallSource:
        "https://img.youpin.mi-img.com/ferriswheel/1480992f_78c8_4816_b216_abca4aa22774.jpeg@base@tag=imgScale&F=webp&h=1440&q=90&w=1080",
      targetUrl:
        "https://www.xiaomiev.com/ultra?spmref=MiShop_PC.mihomepage.mtl_6720bfd0352df30001ebf72c.1",
    },
  ]);

  const sourceTwo = ref<Array<CarouselList>>([
    {
      id: 1,
      bigSource:
        "https://img.youpin.mi-img.com/ferriswheel/f09d7844_1b6b_4162_890d_a677c8bf9cf0.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
      smallSource:
        "https://img.youpin.mi-img.com/ferriswheel/0086d0e3_fc24_4373_b7c6_3754a60c749e.jpeg@base@tag=imgScale&F=webp&h=1320&q=90&w=1080",
      targetUrl:
        "https://www.mi.com/prod/redmi-turbo-4-pro?spmref=MiShop_PC.mihomepage.mtl_6699ccb7799ab50001315f86.1",
    },
    {
      id: 2,
      bigSource:
        "https://img.youpin.mi-img.com/ferriswheel/65cb3dec_8da6_4073_be54_2be18faa5f1c.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
      smallSource:
        "https://img.youpin.mi-img.com/ferriswheel/8587b6d2_d923_47ba_bf6f_73169b2dd8d2.jpeg@base@tag=imgScale&F=webp&h=1320&q=90&w=1080",
      targetUrl:
        "https://www.mi.com/prod/redmi-turbo-4?spmref=MiShop_PC.mihomepage.mtl_6699ccb7799ab50001315f86.1",
    },
    {
      id: 3,
      bigSource:
        "https://img.youpin.mi-img.com/ferriswheel/226ca8f5_9237_448d_95a0_acbd3cd2264a.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
      smallSource:
        "https://img.youpin.mi-img.com/ferriswheel/ec457f79_6fe1_4460_9fe7_78fe13ba555c.jpeg@base@tag=imgScale&F=webp&h=1320&q=90&w=1080",
      targetUrl:
        "https://www.mi.com/prod/redmi-k80-pro?spmref=MiShop_PC.mihomepage.mtl_6699ccb7799ab50001315f86.1",
    },
    {
      id: 4,
      bigSource:
        "https://img.youpin.mi-img.com/ferriswheel/71cad7e8_f910_4d70_a2e8_3693f768d566.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
      smallSource:
        "https://img.youpin.mi-img.com/ferriswheel/af2e7d92_cbb1_450b_81f8_dcdc1ffd8858.jpeg@base@tag=imgScale&F=webp&h=1320&q=90&w=1080",
      targetUrl:
        "https://www.mi.com/prod/redmi-note-14-pro+?spmref=MiShop_PC.mihomepage.mtl_6699ccb7799ab50001315f86.1",
    },
  ]);

  const posterZero: PosterPops = {
    id: 1,
    bigImage:
      "https://img.youpin.mi-img.com/ferriswheel/4b430a99_8012_448d_b348_07bef507ba96.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
    smallImage:
      "https://img.youpin.mi-img.com/ferriswheel/f2291d7e_18b9_46ce_9333_2fa0b0953a07.jpeg@base@tag=imgScale&F=webp&h=1440&q=90&w=1080",
    targetUrl: "/",
  };

  const posterOne: PosterPops = {
    id: 1,
    bigImage:
      "https://img.youpin.mi-img.com/ferriswheel/1dbd8c72_a6f4_4a74_95d9_70a0eea8ceef.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
    smallImage:
      "https://img.youpin.mi-img.com/ferriswheel/7bd3a192_7c0b_4f74_a8d1_8f2c98df8a46.jpeg@base@tag=imgScale&F=webp&h=1320&q=90&w=1080",
    targetUrl: "/",
  };

  const posterTwo: PosterPops = {
    id: 2,
    bigImage:
      "https://img.youpin.mi-img.com/ferriswheel/b47c8038_f3a8_4294_b47e_da65ff39bb61.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
    smallImage:
      "https://img.youpin.mi-img.com/ferriswheel/6434b370_cf55_47ae_8364_1db6fa65a673.jpeg@base@tag=imgScale&F=webp&h=1320&q=90&w=1080",
    targetUrl: "/",
  };

  const posterThree: PosterPops = {
    id: 3,
    bigImage:
      "https://img.youpin.mi-img.com/ferriswheel/da95ee48_1743_45ed_80ea_6a4c2a3e7c11.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
    smallImage:
      "https://img.youpin.mi-img.com/ferriswheel/4c1fa23c_ed51_49de_ab95_128c01f8894b.jpeg@base@tag=imgScale&F=webp&h=1320&q=90&w=1080",
    targetUrl: "/",
  };

  const posterFour: PosterPops = {
    id: 4,
    bigImage:
      "https://img.youpin.mi-img.com/ferriswheel/875ea429_9c10_4d44_a59e_79f2b9bad436.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
    smallImage:
      "https://img.youpin.mi-img.com/ferriswheel/910ae181_5e51_4f43_a862_6b7375343e02.jpeg@base@tag=imgScale&F=webp&h=1320&q=90&w=1080",
    targetUrl: "/",
  };

  const posterFive: PosterPops = {
    id: 5,
    bigImage:
      "https://img.youpin.mi-img.com/ferriswheel/370c9ad8_fb2c_4a13_ad3f_249affd1ec1d.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
    smallImage:
      "https://img.youpin.mi-img.com/ferriswheel/7d8a8d2f_b584_4100_ba5f_417bc0dc9ea5.jpeg@base@tag=imgScale&F=webp&h=1320&q=90&w=1080",
    targetUrl: "/",
  };

  const posterSix: PosterPops = {
    id: 6,
    bigImage:
      "https://img.youpin.mi-img.com/ferriswheel/7f34b8b0_0d61_4e84_b7fe_7c45eb52d36c.jpeg@base@tag=imgScale&F=webp&h=1080&q=90&w=2560",
    smallImage:
      "https://img.youpin.mi-img.com/ferriswheel/e3a1514f_4a08_43fa_b0e5_a42e54bd0ae3.jpeg@base@tag=imgScale&F=webp&h=1320&q=90&w=1080",
    targetUrl: "/",
  };

  // 当首页加载时，获取首页需要的全部数据源
  onMounted(async () => {
    await http.get("home").then((res) => {
      navList.value = res.data.data.navList;
      sourceOne.value = res.data.data.sourceOne;
      sourceTwo.value = res.data.data.sourceTwo;
    });
  });
</script>
